<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
		<title>选择地区</title>

		<link href="../css/layout.min.css" rel="stylesheet" />
		<link href="../css/scs.min.css" rel="stylesheet" />
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<style>
			#myAddrs {
				width: 60%;
				font-size: 16px;
				border: 1px solid #bababa;
				border-radius: 4px;
				padding: 10px;
				color: gray;
			}
		</style>
	</head>

	<body>
		<table style="height: 45px;width: 100%;background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);position: fixed;z-index: 9999;">
			<td style="width: 1px;float: left;">
				<a href="javascript:history.back(-1);" style="color: white;">
					<img src="../icon/back_white.png" style=" height: 35px;margin-top: 5px;margin-left: 5px;" />
				</a>
			</td>
			<td align="center">
				<img src="../icon/change_location.png" style="height: 35px;margin-top: -25px;" />
			</td>
			<td style="width: 1px;float: right;">
			</td>
		</table>

		<div id="city_word" style="height:  10px;">

		</div>
		<h4 align="center" id="city_word">请选择漂茶地区</h4>
		<div id="city_div">

		</div>
		<div style="text-align:center">
			<input type="text" readonly placeholder="Click me to pick an address" id="myAddrs" name="addr" data-key="19-291-3058" />
		</div>

		<div align="center">
			<img id="start" src="../icon/change.png" style="background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);width: 25%;border-radius: 15px;" />
		</div>

	</body>

	<script src="../js/city/jquery.scs.min.js"></script>
	<script src="../js/city/QPLAddrArr.min.js"></script>
	<script src="../js/get.js"></script>
	<script>
		$(function() {
			var mine = JSON.parse(localStorage.getItem("users"));
			var width = $(window).width();
			var height = $(window).height();
			$("#myAddrs").val(mine.user_loc);
			$("#city_word").css("height", height / 8 + "px");
			$("#city_div").css("height", height / 5 + "px");
			$("#start").css("margin-top", height * 0.2 + "px");

			$("#start").bind("click", function() {
				var location = $("#myAddrs").val();
				$.ajax({
					url: "http://www.xxxx.com/api/users/" + mine.wx_openid + "?type=loc",
					contentType: "application/json",
					type: 'put',
					data: JSON.stringify({
						location: location
					}),
					success: function(res) {
						updata();
					},
					error: function(e) {
						alert("更改失败");
					}
				});

			});
			//重新获取数据，更新本地缓存
			function updata() {
				var url = "http://www.xxxx.com/api/users/" + mine.wx_openid;
				$.ajax({
					type: "get",
					url: url,
					success: function(res) {
						localStorage.removeItem("users");
						localStorage.setItem("users", JSON.stringify(res));
						alert("更改成功")
					},
					error: function(e) {
						console.log(e);
					}
				});
			};

			/**
			 * 通过数组id获取地址列表数组
			 *
			 * @param {Number} id
			 * @return {Array} 
			 */
			function getAddrsArrayById(id) {
				var results = [];
				if(addr_arr[id] != undefined)
					addr_arr[id].forEach(function(subArr) {
						results.push({
							key: subArr[0],
							val: subArr[1]
						});
					});
				else {
					return;
				}
				return results;
			}

			/**
			 * 通过开始的key获取开始时应该选中开始数组中哪个元素
			 *
			 * @param {Array} StartArr
			 * @param {Number|String} key
			 * @return {Number} 
			 */
			function getStartIndexByKeyFromStartArr(startArr, key) {
				var result = 0;
				if(startArr != undefined)
					startArr.forEach(function(obj, index) {
						if(obj.key == key) {
							result = index;
							return false;
						}
					});
				return result;
			}

			//bind the click event for 'input' element
			$("#myAddrs").click(function() {
				var PROVINCES = [],
					startCities = [],
					startDists = [];
				//Province data，shall never change.
				addr_arr[0].forEach(function(prov) {
					PROVINCES.push({
						key: prov[0],
						val: prov[1]
					});
				});
				//init other data.
				var $input = $(this),
					dataKey = $input.attr("data-key"),
					provKey = 1, //default province 北京
					cityKey = 36, //default city 北京
					distKey = 37, //default district 北京东城区
					distStartIndex = 0, //default 0
					cityStartIndex = 0, //default 0
					provStartIndex = 0; //default 0

				if(dataKey != "" && dataKey != undefined) {
					var sArr = dataKey.split("-");
					if(sArr.length == 3) {
						provKey = sArr[0];
						cityKey = sArr[1];
						distKey = sArr[2];

					} else if(sArr.length == 2) { //such as 台湾，香港 and the like.
						provKey = sArr[0];
						cityKey = sArr[1];
					}
					startCities = getAddrsArrayById(provKey);
					startDists = getAddrsArrayById(cityKey);
					provStartIndex = getStartIndexByKeyFromStartArr(PROVINCES, provKey);
					cityStartIndex = getStartIndexByKeyFromStartArr(startCities, cityKey);
					distStartIndex = getStartIndexByKeyFromStartArr(startDists, distKey);
				}
				var navArr = [{ //3 scrollers, and the title and id will be as follows:
					title: "省",
					id: "scs_items_prov"
				}, {
					title: "市",
					id: "scs_items_city"
				}, {
					title: "区",
					id: "scs_items_dist"
				}];
				SCS.init({
					navArr: navArr,
					onOk: function(selectedKey, selectedValue) {
						$input.val(selectedValue).attr("data-key", selectedKey);
					}
				});
				var distScroller = new SCS.scrollCascadeSelect({
					el: "#" + navArr[2].id,
					dataArr: startDists,
					startIndex: distStartIndex
				});
				var cityScroller = new SCS.scrollCascadeSelect({
					el: "#" + navArr[1].id,
					dataArr: startCities,
					startIndex: cityStartIndex,
					onChange: function(selectedItem, selectedIndex) {
						distScroller.render(getAddrsArrayById(selectedItem.key), 0); //re-render distScroller when cityScroller change
					}
				});
				var provScroller = new SCS.scrollCascadeSelect({
					el: "#" + navArr[0].id,
					dataArr: PROVINCES,
					startIndex: provStartIndex,
					onChange: function(selectedItem, selectedIndex) { //re-render both cityScroller and distScroller when provScroller change
						cityScroller.render(getAddrsArrayById(selectedItem.key), 0);
						distScroller.render(getAddrsArrayById(cityScroller.getSelectedItem().key), 0);
					}
				});
			});
		});
	</script>

</html>